<template>
    <div class="graphics">
        <div class="top">
            <div class="top-item" v-for="(item,index) in topList" :key="index" :style="'backgroundColor:'+item.color">
                <div class="top-item-content">
                    <i :class="['iconfont',item.icon]"></i>
                    <p>{{item.value.toLocaleString()}}</p>
                </div>
            </div>
        </div>
        <div class="center">
            <div class="center-box">
              <li v-for="(item,index) in centerList" :key="index">{{item}}</li>
            </div>
        </div>
        <div class="bootom">
            <div class="chart">
                <echart :id="lineId" :option="lineOption"></echart>
            </div>
            <div class="chart">
              <echart :id="pieId" :option="pieOption"></echart>
            </div>
            <div class="chart date-box">
              <Calenda></Calenda>
            </div>
        </div>
    </div>
</template>
<script>
import echart from '@/components/echarts/echarts'
import Calenda from '@/components/calenda'
export default {
    components:{echart,Calenda},
    data(){
        return {
            topList:[
                {color:'#6CCAC9',value:123456,icon:'icon-smile-filling'},
                {color:'#FE6C60',value:123456,icon:'icon-meh-filling'},
                {color:'#F7D347',value:123456,icon:'icon-cry-filling'},
                {color:'#57C8F2',value:123456,icon:'icon-clock-filling'},
            ],
            centerList:[
              "用户在 iconfont.cn 可以下载，多种格式的 icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。",
              "但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色",
              "font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。",
              "这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合，与上面两种相比具有如下特点：",
              "打开从 iconfont 平台下载下来的文件，并在目录中打开demo.html，找到图标相对应的 HTML 实体字符码",
              "文本值为 8 位的 Unicode 字符，我们可以打开 demo.html 查找每个图标所对应的 HTML 实体 Unicode 码",
              "如对应的 HTML 实体 Unicode 码为：0x3439 转换后为：\U00003439 就是将 0x 替换为 \U 中间用 0",
              "填补满长度为 8 个字符",
              "用户在 iconfont.cn 可以下载，多种格式的 icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用",
              "但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色",
              "font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。",
            ],
            lineId:'lineId',
            pieId:'pieId',
            lineOption:{
                xAxis: {
                  type: 'category',
                  data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                },
                yAxis: {
                  type: 'value'
                },
                series: [
                  {
                    data: [120, 200, 150, 80, 70, 110, 130],
                    type: 'bar'
                  }
                ]
            },
            pieOption:{
                title: {
                  text: '饼状图',
                  left: 'center'
                },
                tooltip: {
                  trigger: 'item'
                },
                legend: {
                  orient: 'horizontal',
                  left: 'center',
                  top:'30px'
                },
                series: [
                  {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    data: [
                      { value: 1048, name: '类1' },
                      { value: 735, name: '类2' },
                      { value: 580, name: '类3' },
                      { value: 484, name: '类4' },
                      { value: 300, name: '类5' }
                    ],
                    emphasis: {
                      itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                    }
                  }
                ]
            }
        }
    },
}
</script>
<style lang="less" scoped>
.graphics{
    .top{
        display: flex;
        justify-content: space-between;
        &-item{
            width: 300px;
            height: 130px;
            border-radius: 4px;
            padding-top: 20px;
            &-content{
                display: flex;
                flex-direction: column;
                align-items: center;
                i{
                    font-size: 50px;
                    color: white;
                }
                p{
                    color: white;
                    font-size: 28px;
                }
            }
        }
    }
    .center{
        width: 100%;
        height: 90px;
        padding:0 15px;
        box-sizing: border-box;
        overflow: hidden;
        margin-top: 20px;
        &-box{
            animation: 10s wordsLoop linear infinite normal;
            li{
                width: 100%;
                height: 30px;
                line-height: 30px;
                font-size: 14px;
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
            }
        }
        &-box:hover{
            animation-play-state:paused;
            -webkit-animation-play-state:paused
        }
    }
    .bootom{
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
        .chart{
            width: 32%;
            height: 350px;
            border: 1px solid #ccc;
        }
    }
}
@keyframes wordsLoop {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(-240px);
        transform: translateY(-240px);
    }
}
</style>

